<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>名侦探档案馆管理页面</title>
    <script src="../../resource/vue.js"></script>
    <link rel="stylesheet" href="../../ElementUI/theme-chalk/index.css"/>
    <script src="../../ElementUI/index.js" charset="utf-8"></script>
    <script src="../../resource/axios.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .el-aside{
            height: 98vh;
            background-color: #2f3336;
        }
        .logo{
            background-color: #2f3336;
            height: 60px;
        }
        .logo img{
            /*display: block;*/
            width: 168px;
        }
        .el-header{
            background-color: #2f3336;
        }

    </style>
</head>
<body>
    <div id="app">

        <el-container style="height: 98vh">
            <!-- 左边侧边栏 -->
            <el-aside width="200px">
                <div class="logo">
                    <img src="../../imgs/logo.png">
                </div>
                <el-menu
                        default-active="1"
                        class="el-menu-vertical-demo"
                        background-color="#2f3336"
                        text-color="#fff"
                        active-text-color="#ffd04b">

                    <el-menu-item index="1" @click="userAdmin()">
                        <i class="el-icon-user"></i>
                        <span slot="title">用户管理</span>
                    </el-menu-item>
                    <el-menu-item index="2" @click="animeCharactersAdmin()">
                        <i class="el-icon-s-custom"></i>
                        <span slot="title">动漫人物管理</span>
                    </el-menu-item>
                    <el-menu-item index="3" @click="cartoonAdmin()">
                        <i class="el-icon-s-platform"></i>
                        <span slot="title">动画管理</span>
                    </el-menu-item>
                    <el-menu-item index="4" @click="theaterAdmin()">
                        <i class="el-icon-video-camera-solid"></i>
                        <span slot="title">剧场版简介</span>
                    </el-menu-item>

                    <el-menu-item index="5" @click="musicAdmin()">
                        <i class="el-icon-headset"></i>
                        <span slot="title">相关音乐</span>
                    </el-menu-item>

                </el-menu>
            </el-aside>
            <!-- 右边内容 -->
            <el-container>

                <el-header style="display: flex; justify-content: flex-end; align-items: center;">
                    <div class="welcome" style="color: #eee;margin-right: 40px">欢迎{{userName}}登录</div>
                    <el-dropdown @command="handleCommand" style="margin-right: 40px;cursor: pointer">
                         <span class="el-dropdown-link">
                             <i class="el-icon-s-home" size="20" style="font-size: 30px"></i>
                         </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="gotohome">进入前台</el-dropdown-item>
                            <el-dropdown-item command="exit">退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-header>
                <el-main>
                    <div class="content" style="height: 580px">
                        <el-card style="width: 100%;height: 100%">
                            <div>
                                <el-form :inline="true" :model="condition" class="demo-form-inline">
                                    <el-form-item label="用户id">
                                        <el-input v-model="condition.id" placeholder="用户id"></el-input>
                                    </el-form-item>
                                    <el-form-item label="用户姓名">
                                        <el-input v-model="condition.userName" placeholder="用户姓名"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="onSubmit">查询</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                            用户管理页面
                            <el-table
                                    :data="userList"
                                    style="width: 100%">
                                <el-table-column
                                        label="用户id"
                                        width="180"
                                        prop="id"
                                    >
                                </el-table-column>

                                <el-table-column
                                        label="用户姓名"
                                        width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.userName }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="用户密码"
                                        width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.userPassword }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="用户角色"
                                        width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.role?'管理员':'用户' }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="用户年龄"
                                        width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.age?scope.row.age:'暂无数据' }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-button
                                                size="mini"
                                                @click="handleEdit(scope.row)">编辑</el-button>
                                        <el-button
                                                size="mini"
                                                type="danger"
                                                @click="handleDelete(scope.row)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <!-- 分页-->
                            <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="page.currentPage"
                                    :page-sizes="[2, 3, 5, 10]"
                                    :page-size="page.pageSize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="page.totalCount">
                            </el-pagination>
                        </el-card>
                    </div>
                </el-main>
                <el-dialog
                        title="提示"
                        :visible.sync="dialogVisible"
                        width="30%"
                        >

                    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                        <el-form-item label="用户名" prop="userName">
                            <el-input v-model="form.userName"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="userPassword">
                            <el-input v-model="form.userPassword"></el-input>
                        </el-form-item>
                        <el-form-item label="角色"prop="role" >
                            <el-select v-model="form.role" placeholder="请选择角色">
                                <el-option label="普通用户" value="0"></el-option>
                                <el-option label="管理员" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="年龄" prop="age">
                            <el-input v-model="form.age"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="submitEdit">确 定</el-button>
                    </span>
                </el-dialog>
            </el-container>
        </el-container>

    </div>
    <script>
        var vue = new Vue({
            el: '#app',
            data() {
                return{
                    userList:[],
                    userName: "",
                    role:'',
                    dialogVisible: false,
                    form:{
                        id:null,
                        userName:"",
                        userPassword:"",
                        role:null,
                        age: null,
                    },
                    rules: {
                        userName: [
                            {required: true, message: '用户名不能为空', trigger: 'blur'},
                            {min: 3, max: 20, message: '长度在3-20个字符', trigger: 'blur'},
                            {pattern: /^[a-zA-Z0-9_]+$/, message: '只允许字母、数字和下划线', trigger: 'blur'}
                        ],
                        userPassword: [
                            {required: true, message: '密码不能为空', trigger: 'blur'},
                            {min: 6, max: 20, message: '长度在6-20个字符', trigger: 'blur'},
                            {validator: this.validatePassword, trigger: 'blur'} // 自定义密码复杂度校验
                        ],
                        role: [
                            {required: true, message: '请选择角色', trigger: 'blur'}
                        ],
                    },
                    page:{
                        currentPage: 1,
                        pageSize: 5,
                        totalCount: 10,
                    },
                    condition:{
                        // id:"1",
                        // userName:"xrkhy",
                        id:null,
                        userName:null,
                        password:null,
                        role:null,
                        age: null,
                    },

                }
            },
            methods: {
                // 自定义密码复杂度校验函数
                validatePassword(rule, value, callback) {
                    if (!/[A-Za-z]/.test(value) || !/[0-9]/.test(value)) {
                        callback(new Error('需包含字母和数字'));
                    } else {
                        callback();
                    }
                },
                handleCommand(command) {
                    if(command === "gotohome"){
                        window.location.href = "/html/receptiondesk/index.html";
                    }
                    if(command === "exit"){
                        localStorage.removeItem('user');
                    }
                },
                userAdmin(){
                    window.location.href = "/html/admin/admin.html";
                },
                animeCharactersAdmin(){
                    window.location.href = "/html/admin/animeCharactersAdmin.html";
                },
                cartoonAdmin(){
                    window.location.href = "/html/admin/cartoonAdmin.html";
                },
                theaterAdmin(){
                    window.location.href = "/html/admin/theaterAdmin.html";
                },

                musicAdmin(){
                    window.location.href = "/html/admin/musicAdmin.html";
                },
                // 获取用户列表
                getList(){
                    axios.post(`/UserPage`,{
                            ...this.page,
                            condition:{
                                ...this.condition
                            }
                    }).then((respones)=>{
                        console.log(respones.data);
                        let res = respones.data;
                        if (res.code == 200){
                            this.userList = res.data.resultList;
                            this.page.totalCount = res.data.totalCount;
                        }
                    }).catch((error)=>{
                        console.log(error);
                    })
                },
                // 每页条数改变
                handleSizeChange(val) {
                    // console.log(`每页 ${val} 条`);
                    // this.page.pageSize = val;
                    this.page.pageSize = val;
                    this.getList();
                },
                // 当前页码改变
                handleCurrentChange(val) {
                    // console.log(`当前页: ${val}`);
                    // this.page.pageNum = val;
                    this.page.currentPage = val;
                    this.getList();
                },
                // 编辑数据
                handleEdit(row){
                    console.log(row)
                    // 深拷贝数据而非引用传递
                    this.form = {
                        id: row.id,
                        userName: row.userName,
                        userPassword: row.userPassword, // 修正字段名
                        role: row.role.toString(),  // 确保类型一致（Select需要字符串）
                        age: row.age
                    };
                    this.dialogVisible = true;



                    console.log(this.form)
                },
                // 删除数据
                async handleDelete(row){
                    console.log(row.id+"删除");
                    await axios.post(`/UserDelete?id=${row.id}`).then((respones)=>{
                        this.$message.success(respones.data.msg);
                    }).catch((error)=>{
                        console.log(error);
                    })
                    this.getList();
                },
                // 提交修改表格
                async submitEdit(){
                    console.log("提交修改")
                    console.log(this.form)
                    await axios.post(`/UserUpdate`,{
                        ...this.form
                    }).then((respones)=>{
                        this.$message.success(respones.data.msg);
                    }).catch((error)=>{
                        console.log(error);
                    })
                    this.getList();
                    this.dialogVisible = false;

                },

                //  条件查询
                onSubmit(){
                    console.log("查询")
                    this.page.currentPage = 1;
                    this.page.pageSize = 5;
                    console.log(this.page)
                    console.log(this.condition)
                    this.getList();
                },

            },
            mounted() {
                if (localStorage.getItem('showLoginSuccess') === 'true'){
                    this.$message.success('登录成功！');
                    localStorage.removeItem('showLoginSuccess');
                }
                this.getList();
            },

        })
    </script>
</body>
</html>